<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/lc_switch.css">
</head>
<body class="layui-layout-body tuxing">
<!--<div class="layui-layout layui-layout-admin lyiS">-->
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><img src="images/back.png" alt=""></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
<!--        <ul class="layui-nav layui-layout-left">-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="images/qipao.png" class="layui-nav-img">-->
<!--                    <p>气泡图</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="images/zhexian.png" class="layui-nav-img">-->
<!--                    <p>折线图</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/zhu.png" class="layui-nav-img">-->
<!--                    <p>柱状图</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/pie.png" class="layui-nav-img">-->
<!--                    <p>饼图</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/shu.png" class="layui-nav-img shu">-->
<!--                    <p>树状图</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/leida.png" class="layui-nav-img">-->
<!--                    <p>雷达图</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/yibiao.png" class="layui-nav-img yib">-->
<!--                    <p>仪表盘</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/map.png" class="layui-nav-img">-->
<!--                    <p>地图</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/text.png" class="layui-nav-img">-->
<!--                    <p>文字</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/fuzhu.png" class="layui-nav-img">-->
<!--                    <p>辅助图</p>-->
<!--                </a>-->
<!--            </li>-->
<!--        </ul>-->
<!--        <ul class="layui-nav layui-layout-right">-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="images/help.png" class="layui-nav-img">-->
<!--                    <p>帮助</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="images/yichang.png" class="layui-nav-img">-->
<!--                    <p>异常</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/save.png" class="layui-nav-img save">-->
<!--                    <p>保存</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/fabu.png" class="layui-nav-img save">-->
<!--                    <p>发布</p>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">-->
<!--                    <img src="./images/yulan.png" class="layui-nav-img yulan">-->
<!--                    <p>预览</p>-->
<!--                </a>-->
<!--            </li>-->
<!--        </ul>-->
    </div>
    <div class="layui-tab">
        <div class="layui-side layui-bg-black ">
            <div class="layui-side-scroll">
                <div class="look">
                    <img src="images/big.png" class="work work-look1">
                    <img src="images/big.png" class="work work-look2">
                </div>
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree layui-tab-title left_tab" lay-filter="test">
                    <li class="layui-nav-item num layui-this">
                        <img src="images/work.png" class="work">工作台
                    </li>
                    <li class="layui-nav-item num">
                        <img src="images/num.png" class="work">数据管理
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-body layui-tab-content Num" style="background-color: #fff">
            <!-- 内容主体区域 -->
<!--            <div class="num-SJ" style="height: 100%;">-->
<!--                <div class="layui-tab-item layui-show">-->
<!--                    <div class="layui-tab layui-tab-brief lTop" lay-filter="docDemoTabBrief">-->
<!--                        <ul class="layui-tab-title">-->
<!--                            <li class="layui-this">数据大屏</li>-->
<!--                            <li>移动文档</li>-->
<!--                            <li>动态演示</li>-->
<!--                            <li>动态门户</li>-->
<!--                        </ul>-->
<!--                        <div class="layui-tab-content">-->
<!--                            <div class="layui-tab-item layui-show">-->
<!--                                <div class="SJ-top">-->
<!--                                    <div class="SJT-left">-->
<!--                                        <div>已创建<span>1</span>个/还可以创建 <span>x</span>个</div>-->
<!--                                        <button type="button" class="btn tab-button">-->
<!--                                            <i class="layui-icon">&#xe654;</i> 创建组-->
<!--                                        </button>-->
<!--                                    </div>-->
<!--                                    <div class="SJT-right">-->
<!--                                        <button type="button" class="btn">-->
<!--                                            <i class="iconfont">&#xe637;</i> 导出大屏-->
<!--                                        </button>-->
<!--                                        <button type="button" class="btn">-->
<!--                                            <i class="iconfont" style="font-size: 0.3rem">&#xe6e0;</i> 导入大屏-->
<!--                                        </button>-->
<!--                                        <div class="SJT-ss">-->
<!--                                            <input type="text" class="suos" placeholder="请输入关键字">-->
<!--                                            <i class="iconfont ic">&#xe618;</i>-->
<!--                                        </div>-->

<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="SJ-bottom">-->
<!--                                    <ul class="SJB-ul">-->
<!--                                        <li class="SJB_li">-->
<!--                                            <div class="icon">-->
<!--                                                <i class="iconfont">&#xe602;</i>-->
<!--                                            </div>-->
<!--                                            <p class="cuj">创建大屏</p>-->
<!--                                        </li>-->
<!--                                        <li class="SJB_li">-->
<!--                                            <a href="tuceng.html">-->
<!--                                                <div class="SJBL-top"></div>-->
<!--                                                <div class="SJBL-bottom">-->
<!--                                                    <div>-->
<!--                                                        <div class="enjoy">共享文件夹</div>-->
<!--                                                        <span>2020.8.4</span>-->
<!--                                                        <span>14:58</span>-->
<!--                                                    </div>-->

<!--                                                </div>-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li class="SJB_li">-->
<!--                                            <div class="SJBL-top"></div>-->
<!--                                            <div class="SJBL-bottom">-->
<!--                                                <div class="SJBL_left">-->
<!--                                                    <div class="enjoy">名称</div>-->
<!--                                                    <span>2020.8.4</span>-->
<!--                                                    <span>14:58</span>-->
<!--                                                </div>-->
<!--                                                <div class="SJBL_right">-->
<!--                                                    <input type="checkbox" name="check-1" value="4" class="lcs_check"-->
<!--                                                           autocomplete="off"/>-->
<!--                                                    <p>未发布</p>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="layui-tab-item">-->
<!--                                <div class="SJ-top">-->
<!--                                    <div class="SJT-left">-->
<!--                                        <div>已创建<span>1</span>个/还可以创建 <span>x</span>个</div>-->
<!--                                        <button type="button" class="btn tab-button">-->
<!--                                            <i class="layui-icon">&#xe654;</i> 创建组-->
<!--                                        </button>-->
<!--                                    </div>-->
<!--                                    <div class="SJT-right">-->
<!--                                        <button type="button" class="btn">-->
<!--                                            <i class="iconfont">&#xe637;</i> 导出大屏-->
<!--                                        </button>-->
<!--                                        <button type="button" class="btn">-->
<!--                                            <i class="iconfont" style="font-size: 0.3rem">&#xe6e0;</i> 导入大屏-->
<!--                                        </button>-->
<!--                                        <div class="SJT-ss">-->
<!--                                            <input type="text" class="suos" id="" placeholder="请输入关键字">-->
<!--                                            <i class="iconfont ic">&#xe618;</i>-->
<!--                                        </div>-->

<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="SJ-bottom">-->
<!--                                    <ul class="SJB-ul">-->
<!--                                        <li class="SJB_li">-->
<!--                                            <div class="icon">-->
<!--                                                <i class="iconfont">&#xe602;</i>-->
<!--                                            </div>-->
<!--                                            <p class="cuj">创建大屏</p>-->
<!--                                        </li>-->
<!--                                        <li class="SJB_li">-->
<!--                                            <div class="SJBL-top"></div>-->
<!--                                            <div class="SJBL-bottom">-->
<!--                                                <div class="SJBL_left">-->
<!--                                                    <div class="enjoy">名称</div>-->
<!--                                                    <span>2020.8.4</span>-->
<!--                                                    <span>14:58</span>-->
<!--                                                </div>-->
<!--                                                <div class="SJBL_right">-->
<!--                                                    <input type="checkbox" name="check-1" value="4" class="lcs_check"-->
<!--                                                           autocomplete="off"/>-->
<!--                                                    <p>未发布</p>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="layui-tab-item">-->
<!--                                <div class="SJ-top">-->
<!--                                    <div class="SJT-left">-->
<!--                                        <div>已创建<span>1</span>个/还可以创建 <span>x</span>个</div>-->
<!--                                        <button type="button" class="btn tab-button">-->
<!--                                            <i class="layui-icon">&#xe654;</i> 创建组-->
<!--                                        </button>-->
<!--                                    </div>-->
<!--                                    <div class="SJT-right">-->
<!--                                        <button type="button" class="btn">-->
<!--                                            <i class="iconfont">&#xe637;</i> 导出大屏-->
<!--                                        </button>-->
<!--                                        <button type="button" class="btn">-->
<!--                                            <i class="iconfont" style="font-size: 0.3rem">&#xe6e0;</i> 导入大屏-->
<!--                                        </button>-->
<!--                                        <div class="SJT-ss">-->
<!--                                            <input type="text" class="suos" placeholder="请输入关键字">-->
<!--                                            <i class="iconfont ic">&#xe618;</i>-->
<!--                                        </div>-->

<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="SJ-bottom">-->
<!--                                    <ul class="SJB-ul">-->
<!--                                        <li class="SJB_li">-->
<!--                                            <div class="icon">-->
<!--                                                <i class="iconfont">&#xe602;</i>-->
<!--                                            </div>-->
<!--                                            <p class="cuj">创建大屏</p>-->
<!--                                        </li>-->
<!--                                        <li class="SJB_li">-->
<!--                                            <div class="SJBL-top"></div>-->
<!--                                            <div class="SJBL-bottom">-->
<!--                                                <div class="SJBL_left">-->
<!--                                                    <div class="enjoy">名称</div>-->
<!--                                                    <span>2020.8.4</span>-->
<!--                                                    <span>14:58</span>-->
<!--                                                </div>-->
<!--                                                <div class="SJBL_right">-->
<!--                                                    <input type="checkbox" name="check-1" value="4" class="lcs_check"-->
<!--                                                           autocomplete="off"/>-->
<!--                                                    <p>未发布</p>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="layui-tab-item">-->
<!--                                <div class="SJ-top">-->
<!--                                    <div class="SJT-left">-->
<!--                                        <div>已创建<span>1</span>个/还可以创建 <span>x</span>个</div>-->
<!--                                        <button type="button" class="btn">-->
<!--                                            <i class="layui-icon">&#xe654;</i> 创建组-->
<!--                                        </button>-->
<!--                                    </div>-->
<!--                                    <div class="SJT-right">-->
<!--                                        <button type="button" class="btn">-->
<!--                                            <i class="iconfont">&#xe637;</i> 导出大屏-->
<!--                                        </button>-->
<!--                                        <button type="button" class="btn">-->
<!--                                            <i class="iconfont" style="font-size: 0.3rem">&#xe6e0;</i> 导入大屏-->
<!--                                        </button>-->
<!--                                        <div class="SJT-ss">-->
<!--                                            <input type="text" class="suos" placeholder="请输入关键字">-->
<!--                                            <i class="iconfont ic">&#xe618;</i>-->
<!--                                        </div>-->

<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="SJ-bottom">-->
<!--                                    <ul class="SJB-ul">-->
<!--                                        <li class="SJB_li">-->
<!--                                            <div class="icon">-->
<!--                                                <i class="iconfont">&#xe602;</i>-->
<!--                                            </div>-->
<!--                                            <p class="cuj">创建大屏</p>-->
<!--                                        </li>-->
<!--                                        <li class="SJB_li">-->
<!--                                            <div class="SJBL-top"></div>-->
<!--                                            <div class="SJBL-bottom">-->
<!--                                                <div class="SJBL_left">-->
<!--                                                    <div class="enjoy">名称</div>-->
<!--                                                    <span>2020.8.4</span>-->
<!--                                                    <span>14:58</span>-->
<!--                                                </div>-->
<!--                                                <div class="SJBL_right">-->
<!--                                                    <input type="checkbox" name="check-1" value="4" class="lcs_check"-->
<!--                                                           autocomplete="off"/>-->
<!--                                                    <p>未发布</p>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                </div>-->
<!--                            </div>-->

<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="layui-tab-item">-->
<!--                    <div class="layui-tab layui-tab-brief lTop" lay-filter="docDemoTabBrief">-->
<!--                        <ul class="layui-tab-title">-->
<!--                            <li class="layui-this">数据库</li>-->
<!--                            <li>第三方接口</li>-->
<!--                        </ul>-->
<!--                        <div class="layui-tab-content">-->
<!--                            <div class="layui-tab-item layui-show">-->
<!--                                <div class="SJ-top">-->
<!--                                    <div class="SJT-left">-->
<!--                                        <div>全部数据库<span>0</span>个</div>-->

<!--                                    </div>-->
<!--                                    <div class="SJT-right">-->
<!--                                        <button type="button" class="SJt-num layui-btn layui-btn-radius layui-btn-primary">-->
<!--                                            <i class="layui-icon">&#xe654;</i> 新建数据源-->
<!--                                        </button>-->
<!--                                        <div class="SJT-ss">-->
<!--                                            <input type="text" class="suos" placeholder="请输入关键字">-->
<!--                                            <i class="iconfont ic">&#xe618;</i>-->
<!--                                        </div>-->

<!--                                    </div>-->
<!--                                </div>-->

<!--                            </div>-->
<!--                            <di class="layui-tab-item">-->
<!--                                <div class="SJ-top">-->
<!--                                    <div class="SJT-left">-->
<!--                                        <div>全部第三方接口<span>0</span>个</div>-->

<!--                                    </div>-->
<!--                                    <div class="SJT-right">-->
<!--                                        <button type="button" class="layui-btn layui-btn-radius layui-btn-primary">-->
<!--                                            <i class="layui-icon">&#xe654;</i> 新建组-->
<!--                                        </button>-->
<!--                                        <div class="SJT-ss">-->
<!--                                            <input type="text" class="suos" placeholder="请输入关键字">-->
<!--                                            <i class="iconfont ic">&#xe618;</i>-->
<!--                                        </div>-->

<!--                                    </div>-->
<!--                                </div>-->

<!--                            </di>-->

<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="sj-num">
                <div class="sj-top">
                    <i class="iconfont">&#xe6cc;</i>
                    <span>新增数据源</span>
                </div>
                <ul class="sj-bottom">
                    <li>
                        <div class="sjleft sjs1">
                            <img src="images/book.png" alt="">
                        </div>
                        <p>ORACLE</p>

                    </li>
                    <li>
                        <div class="sjleft sjs2">
                            <img src="images/book.png" alt="">
                        </div>
                        <p>PostgreSQL</p>

                    </li>
                    <li onmouseover="SJmove(this)" onmouseout="SJout(this)">
                        <div class="sjleft sjs3">
                            <img src="images/book.png" alt="">
                        </div>
                        <p>MySQL</p>
                        <div class="sj-fu">
                            <i class="iconfont">&#xe678;</i>
                        </div>
                    </li>
                    <li>
                        <div class="sjleft sjs4">
                            <img src="images/book.png" alt="">
                        </div>
                        <p>MariaDB</p>

                    </li>
                    <li>
                        <div class="sjleft sjs5"><img src="images/book.png" alt=""></div>
                        <p>SQLServer</p>
                    </li>
                </ul>

            </div>

        </div>
    </div>
    <div class="sj-Num">
        <div class="sjN-conten">
            <div class="sjNc-top">
                <span>新增MySQL数据</span>
                <i class="iconfont">&#xe714;</i>
            </div>
            <div class="sjNc-cont">
                <div class="sjNc-input">
                    <span>数据库名称:</span>
                    <input type="text" placeholder="请输入数据源名称">
                </div>
                <div class="sjNc-input">
                    <span>数据库地址:</span>
                    <input type="text" placeholder="请输入数据库地址">
                </div>
                <div class="sjNc-input">
                    <span>数据库端口:</span>
                    <input type="text" placeholder="请输入数据库端口">
                </div>
                <div class="sjNc-input">
                    <span>数据库/ODBC:</span>
                    <input type="text" placeholder="请输入数据库/ODBC">
                </div>
                <div class="sjNc-input">
                    <span>数据库用户名:</span>
                    <input type="text" placeholder="请输入数据库用户名">
                </div>
                <div class="sjNc-input">
                    <span>数据库密码:</span>
                    <input type="text" placeholder="请输入数据库密码">
                </div>
                <a href="">测试连接</a>
                <p>小提示：请设置您的数据库允许我们的服务器IP：101.37.90.165连接。</p>
            </div>
            <div class="tab-bottom">
                <button type="button" class="btn-primary">确定</button>
                <button type="button" class="btn" onclick="hidenum()">取消</button>
            </div>
        </div>
    </div>
<!--    <div class="layui-side layui-bg-black" id="div5">-->
<!--        <div class="Child-top">-->
<!--            <div class="ChildT-left" onclick="togge()"><img src="images/lianjie.png" alt=""></div>-->
<!--            <div class="ChildT-top">图层</div>-->
<!--            <div class="ChildT-right"><img src="images/de.png" alt=""></div>-->
<!--        </div>-->
<!--        <div class="Child-check">-->
<!--            <div class="ChildC-input">-->
<!--                <input type="radio" name="tex" id="for" onclick="check(this)"><span></span>-->
<!--            </div>-->
<!--            <label for="for"><img src="images/qipao1.png" alt=""> </label>-->
<!--            <div class="ChildC-fenl"><img src="images/fenlei.png" alt=""></div>-->
<!--        </div>-->
<!--        <div class="Child-check">-->
<!--            <div class="ChildC-input">-->
<!--                <input type="radio" name="tex" id="for2" onclick="check(this)"><span></span>-->
<!--            </div>-->
<!--            <label for="for2"><img src="images/qipao1.png" alt=""> </label>-->
<!--            <div class="ChildC-fenl"><img src="images/fenlei.png" alt=""></div>-->

<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-side layui-bg-black" id="div4">-->
<!--        <div class="Child-top">-->
<!--            <div class="ChildT-left"><img src="images/lianjie.png" alt=""></div>-->
<!--            <div class="ChildT-top">文件夹</div>-->
<!--            <div class="ChildT-right"><i class="iconfont">&#xe602;</i></div>-->
<!--        </div>-->
<!--        <div class="SJT-ss qieh">-->
<!--            <input type="text" class="suos" placeholder="在这里输入您想要搜索的内容">-->
<!--            <i class="iconfont ic">&#xe618;</i>-->
<!--        </div>-->
<!--        <div class="LEFT"><img src="images/left.png" alt=""></div>-->
<!--    </div>-->

<!--    <div class="layui-body">-->
<!--        &lt;!&ndash; 内容主体区域 &ndash;&gt;-->


<!--    </div>-->

<!--    <div class="layui-right layui-bg-black" id="div3">-->
<!--        <div class="ChildT-top">空页面</div>-->
<!--        <div class="ChlidT-kon">请选择一个文件夹</div>-->
<!--    </div>-->
<!--    <div class="layui-footer">-->
<!--        &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
<!--        <input type="checkbox" name="check-1" value="4" class="lcs_check" autocomplete="off"/>-->
<!--        <div class="Child-add">-->
<!--            <img src="images/jian.png" alt="">-->
<!--            <div id="slideTest1" class="demo-slider"></div>-->
<!--            <img src="images/+.png" alt="">-->
<!--        </div>-->
<!--    </div>-->
</div>
</body>

<script src="js/jquery.min.js"></script>
<script src="js/layui.js"></script>
<script src="js/element.js"></script>
<script src="js/lc_switch.js"></script>
<script src="js/login.js"></script>

<script>
    function check(thiss) {
        if(thiss.value==1){
            thiss.value=0;thiss.checked=0;
        }else{
            thiss.value=1;
        }
    }
    // 大屏自适应
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // docEl.style.fontSize = 100 * (1280 / 3840) + 'px';
                docEl.style.fontSize = 100 * (clientWidth / 3200) + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
function shownum(){
    $('.sj-Num').css('display','block');
}
function hidenum(){
    $('.sj-Num').css('display','none');

}
    layui.use('slider', function () {
        var slider = layui.slider;
        //渲染
        slider.render({
            elem: '#slideTest1',  //绑定元素
            value: 30, //初始值
            theme: '#88d5f2',//主题色
        });
    });

</script>
</html>